<template>
	<view class="page" v-if="!loading">
		<view class="attaches" v-if="setData.vote_works_show">
			<swiper v-if="detail.watermark_attaches.length>0" class="swiper" circular :indicator-dots="detail.watermark_attaches.length>1" indicator-active-color="#FE7F00" :autoplay="autoPlaySwiper" :current="0" :interval="8000" >
				<swiper-item v-for="(item,index) in detail.watermark_attaches">
					<view class="swiper_content" @click="openImage(item.url)">
						<image v-if="checkType(item.url)=='image'" class="swiper_img" :mode="'aspectFill'"
							:src="item.thumb_url"></image>
						<video class="swiper_video" v-if="checkType(item.url)=='video'" 
							@play="pauseAuto" 
							@pause="startAuto" 
							@ended="startAuto"
							@click.stop="" 
							:src="item.url"
							:poster="item.url+'?vframe/jpg/offset/1'"
							:enable-progress-gesture="false" controls>
						</video>
					</view>
				</swiper-item>
			</swiper>
			<div class="pla_text" v-else>
				<span>{{ detail.name }}</span>
			</div>
		</view>
		<view class="ver_attach" v-else>
            <view v-for="(item,index) in detail.watermark_attaches">
                <view class="swiper_content" @click="openImage(item.url)">
                    <img v-if="checkType(item.url) == 'image'" class="swiper_img"  :src="item.thumb_url"/>
				 
                    <video class="swiper_video" v-if="checkType(item.url) == 'video'" @play="pauseAuto" @pause="startAuto"
                        @ended="startAuto" @click.stop="" :src="item.url" :poster="item.url + '?vframe/jpg/offset/1'"
                        :enable-progress-gesture="false" controls>
                     </video>
                </view>
            </view>
        </view>
		<view class="detail_info">
			<div class="activity_num" v-if="setData.vote_open_reg">
				<div>
					<div>累计{{data.settings.vote_unit}}数 
					<div class="under_line" :style="{borderColor:data.settings.button_color+' transparent transparent transparent'}"></div></div>
					<div>{{setData.vote_quali==1?detail.stats.first_num:detail.stats.last_num}}</div>
				</div>
				<div>
					<div>当前排名 <div class="under_line" :style="{borderColor:data.settings.button_color+' transparent transparent transparent'}"></div></div>
					<div>{{detailData.rank}}</div>
				</div>
				<div>
					<div>距上一名 <div class="under_line" :style="{borderColor:data.settings.button_color+' transparent transparent transparent'}"></div></div>
					<div>{{detailData.diff}}</div>
				</div>
			</div>
			<view class="divider" v-if="setData.vote_open_reg"></view>
			<view class="action" v-if="setData.vote_open_reg">
				<view class="btn" @click="openShare(false)" :style="{background:data.settings.second_color,color: data.settings.second_text_color}">{{setData.vote_Info_share_button}}</view>
				<view class="btn vote" @click="openCapt" :style="{background:data.settings.button_color,color: data.settings.button_font_color}">
					<view class="text">{{setData.vote_Info_button}}</view>
					<view class="chance" v-if="loginStatus">剩余{{chance.num}}{{data.settings.vote_unit}}</view></view>
			</view>
			<view class="other_action" v-if="(detail.url!='' ||activityText.open_gift) && setData.vote_open_reg">
				<view @click="action(1)" v-if="detail.url!=''">{{setData.vote_Info_work_button}}</view>
				<view @click="action(2)" v-if="activityText.open_gift">{{setData.vote_gift_button}}</view>
			</view>
			<view class="content_info">
				<view class="title" style="height: auto;line-height: 42rpx;">{{detail.name}}</view>
				<view class="content_text">
					{{detail.speak}}
				</view>
			</view>
			<view class="content_info"  v-if="detailData.info.ext_fields_val.length>0"  v-for="item in detailData.info.ext_fields_val">
				<view class="title">{{item.name}}</view>
				<view class="content_img">
					<view class="content_source" v-if="Array.isArray(item.value)">
						<view class="" v-for="child in item.value">
							<image  v-if="checkType(child.url)=='image'" class="swiper_img" :mode="'aspectFit'" :src="child.url"></image>
							<video class="swiper_video" v-if="checkType(child.url)=='video'" :poster="child.url+'?vframe/jpg/offset/1'" :src="child.url" :enable-progress-gesture="false" controls> </video>
						</view>
					</view>
					<view v-else-if="item.value.hasOwnProperty('url') && item.value.url.indexOf('http')>-1">
						<div v-if="item.url!=''">
							<!-- <audio class="my_audio" :poster="setData.banner" :name="item.value.name" :src="item.value.url"   controls></audio> -->
							 <audioPlay playStyle="1" :poster="setData.banner" :info="item.value" :src="item.value.url" ></audioPlay>
						</div>
					</view>
					<view v-else class="content_text">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="content_info"  v-if="detailData.info.remark!=''">
				<view class="title"> </view>
				<view class="content_other">
					<div v-html="detailData.info.remark">
					</div>
				</view>
			</view>
			<view class="complain" @click="action(3)">
				举报
			</view>
			
			
		</view>
		<view class="comment" v-if="setData.work_comment">
			<view class="send_info">
				<input class="" v-model="worksComment" type="text" placeholder="评论支持一下~" confirm-type="send" @confirm="createComment"/>
				<view class="send_btn" @click="createComment">发送</view>
			</view>
			<view class="comment_list">
				<view class="title">
					<view></view>评论({{commentTotal}})
				</view>
				<view class="item" v-for="(item,index) in commentList" :key="index">
					<view class="left">
						<img :src="item.user.headimgurl || item.user.avatar" alt="">
					</view>
					<view class="right">
						<view>
							<span class="name">{{item.user.nickname || item.user.name}}</span>
							<span class="timer" style="color: #F4A032;" v-if="item.isPend">待审</span>
							<span class="timer" v-else>{{item.time_diff}}</span>
						</view>
						<view class="text">{{item.content}}</view>
					</view>
				</view>
			</view>
			<view class="list_more" @click="getMoreComment" v-if="!commentIsNoMore">
				点击加载更多
			</view>
			<view class="noMore" v-else>没有更多了</view>
		</view>
		<view class="getMoreTimes">
			<img :src="setData.task_float" @click="openTaskCenter" v-if="taskMenuData.length>0"></img>
		</view>
		<view class="back_home">
			<img src="~@/static/vote/back_home.png" @click="backHome"></img>
		</view>
		<taskCenter ref="taskcenter" :titleUnit="setData.vote_unit" :show="showTask" :topImage="setData" :list="taskMenuData" @close="handlerCloseTaskCenter" @finish="handlerTaskFinish"></taskCenter>
		<view style="margin-top: 30rpx;" v-if="data.prize_intro!=''">
			<view class="info_rule">
				<view>
					<view></view>
					<span>奖品介绍</span>
					<view></view>
				</view>
				<view>
					 <view class="dec" v-html="data.prize_intro"></view>
				 </view>
			</view>
		</view>
		<div class="sports_swiper"  v-if="bottom_ads.length!=0">
			  <swiper class="swiper" circular :indicator-dots="false" :autoplay="true"  :current="0">
			    <swiper-item v-for="(item,index) in bottom_ads" >
			      <div class="swiper_content" @click="jumpNew(item.link)">
			        <image  v-if="checkType(item.image)=='image'" class="swiper_img" :mode="'scaleToFill'" :src="item.image"></image>
					<video class="swiper_video" v-if="checkType(item.image)=='video'" :src="item.image" :enable-progress-gesture="false" controls>
					</video>
			      </div>
			    </swiper-item>
			  </swiper>
		</div>
		<view class="modal_vote"  @touchmove.prevent v-if="voteModal">
			<view class="content">
				<view class="btn">
					<view class="close" @click="voteModal = false">关闭</view>
					<view class="confirm" @click="submit">确认</view>
				</view>
			</view>
			
		</view>
		<view class="modal_lott"  @touchmove.prevent v-if="lottModal">
			<view class="content" v-if="lottStatus==0">
				<view class="text">
					{{setData.vote_button}}成功
				</view>
				<view class="vote_ads" @click="jumpNew(lottads.link)">
					<img :src="lottads.image" alt=""/>
				</view>
				<view class="close" @click="closePage">
					<img src="~@/static/guess/close.png" alt="">
				</view>
			</view>
		</view>
		<votePrize ref="votePrize" title="恭喜你获得一次抽奖机会" :isNeglect="true" :chance="chance.lottery" :setData="data" @finish="prizeBack"></votePrize>
		<showImage ref="showImage" :currentIndex="current" :data="detail.watermark_attaches"></showImage>
		<collectPhone  :data="data" ></collectPhone>
		<view class="shareModal" v-if="showShare"  @click="showShare=false">
			<view class="wechatText">
				<span>点击右上角“···”按钮 <br/>  分享给好友</span>
				<img src="~@/static/guess/top-right.png"/>
			</view>
		</view>
		<guide></guide>
	</view>

</template>

<script>
	import {getVoteWorkInfo,createVoteComment,getVoteComment,ActivityInfo,taskList,chance,voteWork,getVotePreAdd,activityText} from '@/api/api.js'
	import {LoginApp,checkLogin,getSystemInfo,isWeiXin,isQianfan,checkPlatform,newJumpUrl,proxyShareFun,tecenctCpta} from '@/until/QFH5.js'
	import { mapGetters } from 'vuex'
	import {captID} from '@/model/captTencent.js'
	export default {
		computed:{
			...mapGetters(['loginInfo','qiniuUrl','guide','updateTask','showCollectPhone'])
		},
		data() {
			return {
				loginStatus:false,
				msg: '详情页',
				queryData:{},
				detailData:{
					info:{
						ext_fields_val:[]
					}
				},
				detail:{
					stats:{
						last_num:0,
						first_num:0
					}
				},
				bottom_ads:[
					// {image:require('@/static/vote/top_bg.png')},
					// {image:require('@/static/vote/advertise.png')}
				],
				voteModal:false,
				loading:true,
				worksComment:'',
				commentList:[],
				commentListAll:[],
				commentTotal:0,
				commentIsNoMore:false,
				commentPage:0,
				
				showTask:false,
				data:'',
				setData:'',
				taskMenuData:[],
				chance:{num:0},
				
				lottModal:false,
				lottads:'',
				lottStatus:0,
				current:'',
				
				autoPlaySwiper:true,
				showShare:false,
				activityText:{
					open_gift:false
				},
				captcha:null,
				captData:null
			}
		},
		methods: {
			closePage(){
				console.log('closePage++++++')
				this.lottModal=false
				this.initWorksChance()
			},
			initCapt(){
				let _this = this
				let captchaId = captID; //腾讯滑块验证码appid
				//生成一个滑块验证码对象
				this.captcha = new TencentCaptcha(captchaId, function (res) {
				    if (res.ret === 0) {
						_this.captData = res
				            // 页面上滑动正确，请求自己的业务接口
				            // 记得把验证成功的票据和随机字符带到自己接口中去腾讯验证票据的真实性
				        _this.votes()
				    }
				});
			},
			 openCapt(){
				let callback = async()=>{
					let nowTime =  Math.floor(new Date()/1000)
					if(nowTime<this.setData.vote_first_date.start){
						uni.showToast({
							title:'活动未开始',
							icon:'none'
						})
						return 
					}
					if(nowTime>this.setData.vote_first_date.end && !this.setData.vote_last){
						uni.showToast({
							title:'活动已结束',
							icon:'none'
						})
						return 
					}
					let res = await tecenctCpta({works_id:this.queryData.work_id,actid:this.queryData.id},'vote','vote')
					if(res.data.need_auth){
						if(this.captcha==null)
							this.initCapt()
						this.captcha.show()
						return
					}else{
						this.captData = null
						this.votes()
					}
				}
				this.getAuth(callback)
				
			},
			backHome(){
				let url ="/plugin/pages/index?type=vote&plugin=vote&id="+this.queryData.id
				this.$navigateTo({ url:url})
			},
			openShare(socks=false){
				let title = this.data.settings.info_title
				title = title.replace(/{ID}/g,this.detail.number).replace(/{NAME}/g,this.detail.name)
				let img = this.detail.watermark_attaches.length>0?this.detail.watermark_attaches[0].url:this.setData.banner
				img = this.checkType(img)=='image'?img:img+'?vframe/jpg/offset/1'
				proxyShareFun(title,img,this.detail.speak,window.location.href,null,()=>{})
				if(socks)
					return
				
				this.showShare = true
			},
			startAuto(){
				console.log('start')
				this.autoPlaySwiper = true
			},
			pauseAuto(){
				console.log('end')
				this.autoPlaySwiper = false
			},
			openImage(data){
				this.current = data
				this.$nextTick(()=>{
					this.$refs.showImage.init()
				})
			},
			jumpNew(url){
			  let callback = ()=>{
				  if('' == url || undefined == url){
				    return;
				  }else{
				    window.open(url)
				  }
			  }
				this.getAuth(callback)
			},
			votes(){
				let callback=()=>{
					if(this.chance.num==0){
						uni.showToast({
							title:'活动次数不足',
							icon:'none'
						})
						if(this.activityText.has_task){
							this.openTaskCenter()
						}
						return
					}
					
					let obj = {plugin:'vote',actid:this.queryData.id,works_id:this.queryData.work_id}
						
					if(this.captData!=null){
						obj.ticket = this.captData.ticket
						obj.rand_str = this.captData.randstr
					}
					voteWork(obj).then(res=>{
						if(res.code==0){
							this.initWorksChance()
							this.init()
							this.$refs['taskcenter'].getCard()
							let length = this.setData.vote_ads.length
							if(length>0){
								let randomNum = Math.floor(length* Math.random())
								this.lottads = this.setData.vote_ads[randomNum]
							}else{
								this.lottads = {image:''}
							}
							if(res.data.lottery==0){
								this.lottStatus = 0
								if(length>0){
									this.lottModal = true
								}else{
									uni.showToast({
										title:'投'+this.setData.vote_unit+'成功',
										icon:'none'
									})
								}
							}else{
								this.lottStatus = 1
								// this.lottModal = true
								this.$refs.votePrize.openLott()
							}
						}else{
							uni.showToast({
								title:res.text,
								icon:'none'
							})
						}
					})
				}
				this.getAuth(callback)
			},
			prizeBack(){
				this.initWorksChance()
			},
			handlerCloseTaskCenter(){
				this.showTask=false
				this.initTask()
					 
			},
			//检查平台
			checkPlat(){
				let plat = checkPlatform()
				if(!plat){
					this.$store.dispatch('setGuideShow',4)
				}
				return plat
			},
			//完成任务
			handlerTaskFinish(val){
				if(val && val.type=='share')
					this.showShare = true
				this.initTask()
				this.initWorksChance()
			},
			initTask(){
				taskList({actid:this.queryData.id}).then(res=>{
					this.taskMenuData = res.data
				})
			},
			async initWorksChance(){
				this.loginStatus = await checkLogin()
				if(this.loginStatus){
				
					chance({actid:this.queryData.id}).then(res=>{
						this.chance = res.data
						
					})
				}
			},
			openTaskCenter(){
				let callback = ()=>{
					this.showTask = !this.showTask
					this.$refs['taskcenter'].getCard()
				}
				this.getAuth(callback)
			},
			async getAuth (callback=()=>{},back=()=>{},isNeglect=false){
				let {isWechat,phone} = this.guide
				if(this.checkPlat()){
					if(!isNeglect && this.pageStatus==0){
						uni.showToast({ title:'活动还没开始呢', icon:'none' })
						return
					}
					if(!isNeglect && this.pageStatus==1){
						uni.showToast({ title:'活动已经结束了', icon:'none' })
						return
					}
					let loginStatus = await checkLogin()
					if(!loginStatus){
						this.login()
						return
					}
					
				
					if(isQianfan()){
						if(!isWechat){
							this.$store.dispatch('setGuideShow',1)
							back()
							return
						}
						if(phone==""){
							this.$store.dispatch('setGuideShow',2)
							if(this.guaStatus){
								this.resetGua()
								this.guaStatus = false
							}
							return
						}
						callback()
					}else{
						callback()
					}
				}
			},
			login(){
				if(this.checkPlat()){
					let redirectUrl = window.location.href.split('/plugin-view')[1]
					LoginApp(this.actid,redirectUrl)
				}
			},
			action(type){
				//1链接 2礼物 3投诉
				if(type==1){
					this.jumpNew(this.detail.url)
				}else if(type==2){
					let callback = ()=>{
						let {start,end} = this.setData.vote_quali==1?this.setData.vote_first_date:this.setData.vote_last_date
						let nowTime = Math.floor(new Date()/1000)
						if(nowTime<start){
							uni.showToast({
								title:'投'+this.setData.vote_unit+'时间未到',icon:'none'
							})
							return
						}
						if(nowTime>end){
							uni.showToast({
								title:'投'+this.setData.vote_unit+'时间已截止',icon:'none'
							})
							return
						}
						let url ='/plugin/pages/vote/gift?work_id='+this.queryData.work_id+"&actid="+this.queryData.id+"&name="+this.detail.name
						this.$navigateTo({ url:url})
					}
					this.getAuth(callback)
				}else{
					let callback=()=>{
						this.$navigateTo({url:'/plugin/pages/complain?id='+this.actid+'&type=vote&plugin=vote'})
					}
					this.getAuth(callback)
				}
			},
			checkType(val) {
				return this.$checkType(val)
			},
			init(){
				let obj = {plugin:'vote',work_id:this.queryData.work_id,actid:this.queryData.id}
				let p1 = getVoteWorkInfo(obj)
				let p2 = ActivityInfo({actid:this.queryData.id},'vote','vote') 
				Promise.all([p1,p2]).then(resArr=>{
					let res = resArr[0]
					this.detailData = res.data
					this.detail = res.data.info
					// if(this.detail.watermark_attaches.length>0){
					// 	this.detail.watermark_attaches.map(item=>{
					// 		item.url = item.url.split('?watermark')[0]
					// 	})
					// }
					this.$setTitle(res.data.info.name)
					this.data = resArr[1].data
					this.setData = resArr[1].data.settings
					if(resArr[1].data.settings.work_comment){
						this.initComment()
					}
					uni.setStorageSync('platform',JSON.stringify(resArr[1].data.settings.platform))
					localStorage.setItem(this.queryData.id+'ActivityData',JSON.stringify(resArr[1].data))
					if(this.detailData.info.ext_fields_val.length>0){
						getVotePreAdd({plugin:'vote',works_id:this.queryData.work_id,actid:this.queryData.id}).then(res1=>{
							let fileds = res1.data.works_fields
							this.detailData.info.ext_fields_val = []
							fileds.map(item=>{
								if(item.is_system==2){
									this.detailData.info.ext_fields_val.push({name:item.name,value:item.field_value})
								}
							})
							// this.detailData.info.ext_fields_val.map(item=>{
							// 	let fileItem = fileds.find(child=>child.id == item.field_id)
							// 	item.name = fileItem.name
							// })
							
							this.loading = false
						})
					}else{
						this.loading = false
					}
				})
			},
			initComment(next=false){
				let obj = {plugin:'vote',works_id:this.queryData.work_id,actid:this.queryData.id}
				if(this.commentPage>1){
					obj.page = this.commentPage
				}
				getVoteComment(obj).then(res=>{
					if(res.code==0){
						this.commentTotal = res._page.totalCount
						let pendList = res.data.pend_list.reverse()
						pendList.map(item=>{
							item.isPend = true
						})
						if(this.commentPage<2){
							let list = [...pendList,...res.data.list]
							this.commentList = [...list.slice(0,3)]
							this.commentListAll = list
							if(this.commentListAll.length<3){this.commentIsNoMore=true}
						}else{
							this.commentList = [...this.commentList,...res.data.list]
							if(res.data.list.length<20){
								this.commentIsNoMore = true
							}
						}
						if(next){
							this.getMoreComment()
						}
					}
				})
			},
			getMoreComment(){
				if(this.commentPage==0){
					this.commentList = this.commentListAll
					if(this.commentListAll.length<20){
						this.commentIsNoMore = true
					}
				}
				this.commentPage++
				if(this.commentPage>1){
					this.initComment()
				}
			},
			createComment(){
				let callback=()=>{
					if(this.worksComment==''){
						uni.showToast({
							title:'请输入评论内容',
							icon:'none'
						})
						return
					}
					let obj = {plugin:'vote',works_id:this.queryData.work_id,actid:this.queryData.id,content:this.worksComment,}
					createVoteComment(obj).then(res=>{
						if(res.code==0){
							
							this.worksComment = ''
							let obj = res.data
							obj.isPend = true
							this.commentList.unshift(obj)
							// this.commentList = []
							// this.commentPage = 0
							// this.initComment(true)
						}else{
							uni.showToast({
								title:res.text,
								icon:'none'
							})
						}
					})
				}
				this.getAuth(callback)
			},
			//获取动态文本
			getActivity(){
				// console.log('发起请求',this.actid)
				activityText({actid:this.queryData.id}).then(res=>{
					if(res.code ==0){
						this.activityText = res.data
					 
					}
				})
			},
		},
		mounted() {
			let _t = this
			setTimeout(()=>{
				_t.openShare(true)
			},800)
			this.initTask()
			this.init()
			this.initWorksChance()
			this.getActivity()
		},
		onLoad(op){
			this.queryData = op
			uni.setStorageSync('actid',op.id)
			this.$store.commit('SETACTIVITYNAME', 'vote')
			this.$store.commit('SETACTIVITYTYPE', 'vote')
		}
	}
</script>

<style lang="scss" scoped>
	@import 'lott.scss';
	// @font-face{
	// 	font-family: 'ZCOOLKuaiLe-Regular';
	// 	src: url('~@/static/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	// }
	@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
	// https://fonts.google.com/selection/embed  引用地址
	.my_audio{
		width: 640rpx!important;
		/deep/ .uni-audio-default{
			width: 640rpx!important;
			min-width: 640rpx!important;
			max-width: 640rpx!important;
		}
	}
	.ver_attach{
		margin: 30rpx auto 40rpx auto;
		width: 694rpx;
		text-align: center;
		&>view{
			margin-bottom: 12rpx;
			&:last-child{
			    margin-bottom: 0;
			}
		}
		.swiper_img{
			max-width: 100%;
			border-radius: 16rpx;
		}
		.swiper_video{
			width: 694rpx;
			height: 520rpx;
			border-radius: 16rpx;
		}
	}
	.shareModal{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.7);
		text-align: center;
		.wechatText{
			line-height: 0rpx;
			position: relative;
			width: 100%;
			height: 100%;
			&>span{
				color: #FFFFFF;
				font-size: 40rpx;
				font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
				line-height: 60rpx;
				width: 400rpx;
				height: 242rpx;
				position: absolute;
				// left: 50%;
				// top: 50%;
				// transform: translate(-50%,-50%);
				top: 164rpx;
				right: 46rpx;
				letter-spacing: 1.5rpx;
			}
			&>img{
				width: 84rpx;
				height: 115rpx;
				position: absolute;
				top: 27rpx;
				right: 60rpx;
				// transform: rotate(-40deg);
				// animation: bigger 1.5s linear infinite;
			}
		}
	}
	.getMoreTimes{
			position: fixed;
			right: 10rpx;
			bottom: 320rpx;
			z-index: 11;
			img{
				width: 173rpx;
				height: 152rpx;
			}
	}
	.back_home{
		position: fixed;
		left: 0rpx;
		bottom: 441rpx;
		z-index: 11;
		img{
			width: 122rpx;
			height: 122rpx;
		}
	}
	.page {
		background-color: #f7f7f7;
		padding: 1rpx 0 0;
		margin: -1rpx 0 0;
		min-height: 100vh;
		padding-bottom: 60rpx;
	}

	.attaches {
		margin: 30rpx auto 40rpx auto;
		width: 694rpx;
		height: 520rpx;
		position: relative;
		.swiper {
			width: 694rpx;
			height: 520rpx;

			.swiper_content {
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				text-align: center;

				.swiper_img {
					width: 100%;
					height: 100%;
				}

				.swiper_video {
					width: 694rpx;
					height: 520rpx;
				}
			}
		}
		.pla_text {
					box-sizing: border-box;
					position: absolute;
					left: 0;
					top: 0;
					width: 694rpx;
					height: 520rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding:50rpx;
					background: rgba(255, 255, 255, 1);
					border-radius: 16rpx;
					text-align: center;
	
					span {
						display: inline-block;
						text-align: left;
						line-height: 88rpx;
						font-size: 62rpx;
						overflow: hidden;
						max-height: 352rpx;
						// font-family: "ZCOOLKuaiLe-Regular", sans-serif;
						font-family: "ZCOOL KuaiLe", sans-serif;
						font-weight: 400;
						font-style: normal;
					}
				}
	}

	.detail_info {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding:1rpx 0 40rpx ;
		margin: -1rpx auto 0;
		
		.activity_num{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 31rpx;
			&>div{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				&:nth-child(2){
					margin: 0 159rpx;
				}
				&>div{
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					height: 33rpx;
					line-height: 33rpx;
					position: relative;
					text-align: center;
					&:first-child{
						font-weight: bold;
						// overflow: hidden;
						position: relative;
						z-index: 0;
						.under_line{
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translate(-50%,65%);
							width: 100%;
							height: 22rpx;
							opacity: 1;
							border: 8rpx solid #FE7F00;
							border-color: #FE7F00 transparent transparent transparent;
							border-radius: 100%;
							z-index: -1;
						}
						
					}
					&:last-child{
						font-weight: 400;
						margin-top: 3rpx;
					}
					
				}
			}
		}
		.divider{
			width: 650rpx;
			height: 0px;
			opacity: 1;
			border: 1rpx dashed #E6E6E6;
			margin: 30rpx auto 0;
		}
		.action{
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.btn{
				width: 290rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: #70B42B;
				border-radius: 45rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin: 0 15rpx;
				
			}
			.vote{
					display: flex;
					justify-content: center;
					flex-direction: column;
					background: #FE7F00;
					font-family: PingFang SC-Regular, PingFang SC;
					 
						.text{
							line-height: 48rpx;
							height: 48rpx;
						}
						.chance{
							height: 28rpx;
							line-height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					 
				}
		}
		.other_action{
			width: 650rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 42rpx auto 0;
			padding-bottom: 30rpx;
			border-bottom: 1rpx dashed #E6E6E6;
			&>view{
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin: 0 30rpx;
				
			}
		}
		.content_info{
			margin-top: 30rpx;
			padding: 0 30rpx;
			width: 650rpx;
			.title{
				padding-left: 6rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.content_text{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				text-align: justify;
			}
			.content_img{
				margin-top: 20rpx;
				line-height: 0;
				.content_source{
					
				}
				.content_text{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					text-align: justify;
				}
				
			}
			.content_other{
				font-size: 28rpx;
				&::v-deep img{
					width: 100% !important;
					max-width: 750rpx;
					display: block;
					margin: 16rpx 0;
				}
			}
		}
		.complain{
			margin-top: 20rpx;
			width: 670rpx;
			padding: 0 20rpx;
			text-align: right;
			height: 33rpx;
			line-height: 33rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #3B76FF;
		}
	}
	.comment{
		width: 670rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin:30rpx auto 0;
		
		.send_info{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			input{
				width: 476rpx;
				padding: 0 22rpx;
				height: 74rpx;
				border-radius: 30rpx;
				background: #F4F5F6;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #868D97;
				margin: 0 auto;
			}
			.send_btn{
				margin-left: 20rpx;
				width: 130rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				background: #FE7F00;
				border-radius: 37rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
		
		.comment_list{
			.title{
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				&>view{
					width: 10rpx;
					height: 10rpx;
					opacity: 1;
					border: 6rpx solid #4B8DFF;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}
			.item{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				padding:20rpx 0rpx 21rpx;
				width: 670rpx;
				margin: 0 auto;
				position: relative;
				&:not(:last-child){
					&::after{
						content: "";
						position: absolute;
						left: 10rpx;
						bottom: 0;
						width: 650rpx;
						border-bottom: 2rpx dashed #E6E6E6;
					}
					
				}
				.left{
					width: 52px;
					height: 52px;
					img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.right{
					margin-left: 16rpx;
					width: 562rpx;
					&>view:first-child{
						height: 37rpx;
						line-height: 37rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #868D97;
						span:first-child{
							margin-right: 16rpx;
						}
					}
					.text{
						display: block;
						white-space: normal;
						// height: 42rpx;
						line-height: 42rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						margin-top: 8rpx;
						text-align: justify;
					}
				}
			}
		}
		.list_more{
			width: 645rpx;
			padding-right: 12rpx;
			margin-bottom: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #F1F6FE;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #3B76FF;
			position: relative;
			&::after{
				content: "";
				position: absolute;
				left: 398rpx;
				top: 28rpx;
				width: 0rpx;
				border: 10rpx solid;
				border-color:  #3B76FF transparent transparent transparent;
			}
		}
		.noMore{
			width: 645rpx;
			padding-right: 12rpx;
			margin-bottom: 20rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: none;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222;
		}
	}
	
	
	.info_rule{
		width: 650rpx;
		background: #FFFFFF;
		// box-shadow: 0px 0px 20rpx 1rpx rgba(51, 51, 51, 0.08);
		border-radius: 30rpx;
		padding: 36rpx 30rpx 30rpx;
		margin:0 auto;
		&>view:first-child{
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			margin-bottom: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			line-height: 50rpx;
			span{
				margin: 0 30rpx;
			}
			&>view:nth-child(1),&>view:nth-child(3){
				width: 80px;
				height: 0px;
				border-bottom: 2rpx dashed #B3B3B3;
				position: relative;
			}
			// 
			&>view:nth-child(1)::after,&>view:nth-child(3)::before{
				content: "";
				position: absolute;
				top: -2rpx;
				right: -10rpx;
				width: 6rpx;
				height: 6rpx;
				background-color: #B3B3B3;
				border-radius: 50%;
			}
			&>view:nth-child(3)::before{
				left: -10rpx;
				right: auto;
			}
		}
		.title{
			height: 42rpx;
			font-size: 30rpx;
			line-height: 42rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 10rpx;
		}
		.dec{
			font-size: 26rpx;
			::v-deep img{
				width: 100% !important;
				max-width: 750rpx;
				display: block;
				margin: 16rpx 0;
			}
			::v-deep video{
				width: 100% !important;
				max-width: 750rpx;
				display: block;
				margin: 16rpx 0;
			}
		}
		.item_rules{
				font-size: 30rpx;
		}
	}
	.sports_swiper {
	    margin: 30rpx auto 40rpx auto;
	    width: 690rpx;
	    height: 280rpx;
	
	    .swiper {
	      width: 690rpx;
	      height: 280rpx;
	
	      .swiper_content {
	        width: 100%;
	        height: 100%;
	        background: #023e49;
	        border-radius: 16rpx;
	        overflow: hidden;
			  text-align: center;
	
	        .swiper_img {
	          width: 100%;
	          height: 100%;
	        }
			.swiper_video{
				  width: 690rpx;
				  height: 280rpx;
			}
	      }
	    }
	  }

.modal_vote{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 99;
	.content{
		margin: 233rpx auto 0;
		width: 640rpx;
		height: 520rpx;
		background: url('../../../static/vote/modal_bg.png') ;
		background-size: cover;
		border-radius: 20rpx;
	}
}

</style>